<template>
  <div class="detail-wrapper">
    <div class="left">
      <div class="header">
        {{ form.pointName ? `${form.pointName} ：` : form.pointName
        }}{{ form.appDesc }}
        <el-tag :type="getDictStyle('rectification_status', form.status)">
          {{ getDictValue('rectification_status', form.status) }}
        </el-tag>
      </div>
      <div class="center">
        <el-row>
          <el-col :span="6">
            <div class="center-item">
              <span class="center-item-label">所属园区：</span>
              <span class="center-item-value">{{ form.parkName }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="center-item">
              <span class="center-item-label">检查场景：</span>
              <span class="center-item-value">{{ form.senceName }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="center-item">
              <span class="center-item-label">检查时间：</span>
              <span class="center-item-value">{{ form.createTime }}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="center-item">
              <span class="center-item-label">隐患位置：</span>
              <span class="center-item-value">{{ form.locationDesc }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="center-item">
              <span class="center-item-label">检查点：</span>
              <span class="center-item-value">{{ form.pointName }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="content">
        <div
          class="content-item"
          v-for="(item, index) of recordList"
          :key="index"
        >
          <div class="title">隐患整改记录{{ recordList.length - index }}</div>
          <div class="content-item-part">
            <el-row :gutter="10" style="margin-bottom: 10px">
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">隐患描述：</span>
                  <span class="part-item-value">{{ item.repairDesc }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">隐患图片：</span>
                  <span class="part-item-value"
                    ><FileList
                      v-if="form.dangerImgFile"
                      fileType="picture"
                      :showDownload="false"
                      :list="[form.dangerImgFile]"
                  /></span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">整改措施：</span>
                  <span class="part-item-value">{{ item.repairMethod }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">整改对象：</span>
                  <span class="part-item-value">{{
                    getDictValue(
                      'special_task_publish_scope',
                      item.repairCompany,
                    )
                  }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">整改部门：</span>
                  <span class="part-item-value">{{ item.repairDeptName }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">责任人：</span>
                  <span class="part-item-value">{{ item.dutyPersonName }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">整改期限：</span>
                  <span class="part-item-value">{{ item.deadLine }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">是否产生费用：</span>
                  <span class="part-item-value">{{
                    getDictValue('yn', form.needPay)
                  }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">费用(元)：</span>
                  <span class="part-item-value">{{ item.cost }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">是否实地巡查：</span>
                  <span class="part-item-value">{{
                    getDictValue('yn', form.patrol)
                  }}</span>
                </div>
              </el-col>
            </el-row>
            <!-- <div class="title">审批结果</div>
            <el-row :gutter="10">
                <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">审批结果：</span>
                  <span class="part-item-value">{{
                    getDictValue('isPass', form.patrol)
                  }}</span>
                </div>
              </el-col>
            </el-row> -->
            <div class="title" v-if="item.checkTime">整改结果</div>
            <el-row :gutter="10" v-if="item.checkTime">
              <el-col :span="24">
                <div class="part-item">
                  <span class="part-item-label">现场照片：</span>
                  <span class="part-item-value"
                    ><FileList
                      fileType="picture"
                      :showDownload="false"
                      :list="[]"
                  /></span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">确认人：</span>
                  <span class="part-item-value">{{ item.checkPerson }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="part-item">
                  <span class="part-item-label">完成时间：</span>
                  <span class="part-item-value">{{ item.checkTime }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <Tabs
        @change="(val) => (currentComponentKey = val)"
        :currentKey="currentComponentKey"
        :tabsConfig="tabsConfig"
        :hasBorder="true"
      />
      <div class="right-content" v-if="currentComponentKey === 'log'">
        <div class="log" v-for="(item, index) of logList" :key="index">
          <div class="log-title">{{ item.title }}</div>
          <div class="log-item">检查时间：{{ item.operateTime }}</div>
          <div class="log-item">操作人员：{{ item.operatorName }}</div>
          <template v-if="item.title === '费用审批'">
            <div class="log-item">
              审批结果：{{ getDictValue('isPass', item.result) }}
            </div>
            <div class="log-item">审批意见：{{ item.content }}</div>
            <div class="log-item">
              附件资料：<FileList :list="item.fileInfoList" width="150" />
            </div>
          </template>
          <template v-if="item.title === '下发通知'">
            <div class="log-item">
              通知公告：<span class="link" @click="handleGotoNotice">{{
                item.noticeName
              }}</span>
            </div>
          </template>
          <template v-if="item.title === '申请巡查'">
            <div class="log-item">
              整改计划：<span class="link" @click="handleGotoNotice">{{
                item.planName
              }}</span>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import Tabs from '@/components/tabs/index.vue'
import FileList from '@/components/fileList/index.vue'
import { useDict } from '@/hooks/useDict'
import {
  dangerLog,
  dangerTaskList,
  getDangerList,
} from '@/api/manager/inspectionManage/rectificationManage.js'
import { useRoute, useRouter } from 'vue-router'

const { dict, getDictValue, getDictStyle } = useDict()
const router = useRouter()
const route = useRoute()

const form = ref({})
const handleDetail = async () => {
  const res = await getDangerList({
    pageIndex: 1,
    pageSize: 9999,
    dangerIds: route.query.pkid,
  })
  form.value = res.data.list[0]
}

const recordList = ref([])
const handleRecordList = async () => {
  const res = await dangerTaskList({
    pkid: route.query.pkid,
  })
  recordList.value = res.data
}

const logList = ref([])
const handleLogList = async () => {
  const res = await dangerLog({
    pkid: route.query.pkid,
  })
  logList.value = res.data
}

const tabsConfig = ref([
  // {
  //   name: '关联查询任务',
  //   value: 'task',
  // },
  {
    name: '整改流程',
    value: 'log',
  },
])
const currentComponentKey = ref('log')

const handleGotoNotice = () => {
  router.push({ name: '' })
}
const handleGotoInspection = () => {
  router.push({ name: '' })
}
onMounted(() => {
  if (route.query.pkid) {
    handleDetail()
    handleRecordList()
    handleLogList()
  }
})
</script>
<style lang="scss" scoped>
:deep(.pictures-item) {
  width: 100px !important;
  height: 50px !important;
}
.detail-wrapper {
  height: 100%;
  display: flex;
  background: #ffffff;
  box-shadow: 0 0 10px 0 rgba(72, 121, 238, 0.1);
  .left {
    width: calc(100% - 300px);
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid #dee4ed;
    display: flex;
    flex-direction: column;
    .header {
      width: 100%;
      height: 54px;
      box-sizing: border-box;
      padding: 0 30px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      border-bottom: 1px solid #dee4ed;
      .el-tag {
        margin-left: 20px;
      }
    }
    .center {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: aliceblue;
      .el-row {
        width: 100%;
      }
      &-item {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 10px 0;
        font-size: 14px;
      }
    }
    .content {
      width: 100%;
      flex: 1;
      overflow-y: auto;
      box-sizing: border-box;
      padding: 20px 30px;
      .title {
        font-size: 14px;
        font-weight: 400;
        color: #151515;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        &::before {
          content: ' ';
          position: absolute;
          left: 0;
          top: 50%;
          width: 4px;
          height: 16px;
          background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
          border-radius: 2px;
          transform: translateY(-50%);
        }
        .el-button {
          margin-left: 10px;
        }
      }
      &-item {
        margin-bottom: 20px;
        &-part {
          background: #f3f7fe;
          box-sizing: border-box;
          padding: 10px 20px;
          border-radius: 4px;
          .el-row {
            width: 100%;
          }
          .part-item {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            margin: 10px 0;
            font-size: 14px;
            &-label {
              font-weight: 400;
              font-size: 14px;
              color: #333333;
            }
            &-value {
              font-weight: 400;
              font-size: 14px;
              color: #757575;
              flex: 1;
            }
          }
        }
      }
    }
  }
  .right {
    width: 300px;
    height: 100%;
    .tabs-wrapper {
      height: 54px;
    }
    &-content {
      width: 100%;
      height: calc(100% - 54px);
      overflow-y: auto;
      padding: 20px 30px;
      box-sizing: border-box;
      .log {
        width: 100%;
        margin-bottom: 20px;
        &-title {
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 8px;
          position: relative;
          &::before {
            content: ' ';
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #4677ee;
            border-radius: 50%;
            left: -15px;
            top: 4px;
          }
        }
        &-item {
          font-size: 14px;
          font-weight: 400;
          margin-bottom: 8px;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
        }
        .link {
          color: #4677ee;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
